<template>
  <div class="application list-index">
    <div class="title-box"><span>应用包管理</span></div>
    <div class="top-button">
      <div class="topElement">
        <el-button class="btn new" @click="createApplication" v-if="userType >= 5">创建应用包</el-button>
      </div>
      <div class="search">
        <div class="dataRange">
          <span>筛选创建时间范围：</span>
          <el-date-picker v-model="startTime" type="date" placeholder="请输入开始时间" @change="getApplications" :disabled-date="startDisabled" />
          <el-date-picker v-model="endTime" type="date" placeholder="请输入结束时间" @change="getApplications" :disabled-date="endDisabled" />
        </div>
        <el-select v-model="build.QueryBuildParam!.state" placeholder="请选择状态进行筛选" clearable @change="getApplications">
          <el-option v-for="i in status_options" :key="i.value" :label="i.label" :value="i.value"
        /></el-select>
        <div class="refresh">
          <el-input v-model="build.QueryBuildParam!.name" placeholder="请输入名称进行筛选" clearable :prefix-icon="Search" @input="getApplications"> </el-input>
          <el-icon @click="refresh()" class="refreshIcon">
            <RefreshLeft />
          </el-icon>
        </div>
      </div>
    </div>
    <appManager :data="tableData" @update-list="getApplications"></appManager>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="build.offset"
        v-model:page-size="build.limit"
        :page-sizes="[10, 20, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @import '@/assets/scss/list.scss';
  .application {
    .title-box {
      height: 60px;
      width: calc(100% - 200px);
      position: absolute;
      top: 50px;
      left: 200px;
      background-color: $blank-color;
      color: $text-color;
      z-index: 100;
      .topElement {
        width: 200px;
      }
      span {
        font-size: 16px;
        font-weight: bold;
        margin-left: 20px;
        margin-right: 21px;
        line-height: 60px;
      }
    }
    .search {
      .dataRange {
        display: flex;
        align-items: center;
        gap: 5px;
        span {
          font-size: 14px;
        }
      }
      .el-input {
        width: 400px;
      }
      .el-select {
        width: 200px;
      }
      display: flex;
      gap: 20px;
      align-items: center;
      height: 28px;
    }
    :deep(.el-input__wrapper) {
      padding: 0px 11px;
    }
    .refresh {
      display: flex;
      .el-icon {
        width: 28px;
        height: 28px;
      }
    }
  }
</style>
<script lang="ts" setup>
  import appStore from '@/store'
  import { reactive, ref } from 'vue'
  import router from '@/router'
  import appManager from './appManager.vue'
  import { Search } from '@element-plus/icons-vue'
  import ApplicationService, { builds } from '@/api/applicationService'
  let tableTotal = ref(0)
  let tableData = ref([])
  let startTime = ref('')
  let endTime = ref('')
  let userType = ref()
  userType.value = localStorage.getItem('UserType') as string
  const small = ref(false)
  const disabled = ref(false)
  const background = ref(true)

  const startDisabled = (date: any) => {
    if (endTime.value) {
      var start = date
      var end = endTime.value
      return start >= end
    }
    return false
  }
  const endDisabled = (date: any) => {
    if (startTime.value) {
      var start = startTime.value
      var end = date
      return start >= end
    }
    return false
  }

  const createApplication = () => {
    router.push({
      name: 'createApplication'
    })
  }
  const status_options = [
    {
      value: 'INITIALIZED',
      label: '初始化'
    },
    {
      value: 'READY',
      label: '就绪'
    },
    {
      value: 'IMAGE_CREATING',
      label: '镜像创建中'
    },
    {
      value: 'FAILED',
      label: '创建失败'
    }
  ]

  let build: builds = reactive({
    project_id: appStore.userStore.project_id,
    offset: 1,
    limit: 10,
    QueryBuildParam: {
      name: '',
      state: '',
      creation_time: ''
    }
  })
  const getApplications = async () => {
    var starttemp = startTime.value ? parseInt((new Date(startTime.value).getTime() / 1000).toString()) : ''
    var endtemp = endTime.value ? parseInt(((new Date(endTime.value).getTime() + 24 * 60 * 60 * 1000 - 1) / 1000).toString()) : ''
    if (endTime.value || startTime.value) {
      build.QueryBuildParam!.creation_time = starttemp + '/' + endtemp
    } else {
      build.QueryBuildParam!.creation_time = ''
    }
    let res = await ApplicationService.getApplications(build)
    if (res.status === 200) {
      tableTotal = res.data.total_count
      if (res.data.builds) {
        res.data.builds.forEach((item: any) => {
          if (item.size == '0') {
            item.size = '--'
          } else {
            item.size = (item.size / 1024 / 1024).toFixed(2)
          }
        })
      }
      tableData.value = res.data.builds || []
    }
  }
  const handleSizeChange = (val: number) => {
    build.limit = val
    build.offset = 1
    getApplications()
  }

  const handleCurrentChange = (val: number) => {
    build.offset = val
    getApplications()
  }
  const refresh = () => {
    getApplications()
  }

  getApplications()
</script>
